Angular অ্যাপ্লিকেশন গুলিতে রাউটিং ব্যবহার করে একাধিক ভিউ বা পেজ তৈরি করা হয়। RouterModule এর মাধ্যমে Angular অ্যাপ্লিকেশনগুলিতে URL ভিত্তিক নেভিগেশন পরিচালনা করা হয়। রাউটিং কনফিগার করা হয় যাতে নির্দিষ্ট URL-এর জন্য নির্দিষ্ট কম্পোনেন্ট বা ভিউ রেন্ডার করা যায়।

1. রাউটিং মডিউল তৈরি

প্রথমে, Angular অ্যাপ্লিকেশনে রাউটিং কনফিগার করতে AppRoutingModule তৈরি করতে হবে। আপনি CLI ব্যবহার করে এটি তৈরি করতে পারেন:

ng generate module app-routing --flat --module=app

এটি একটি app-routing.module.ts ফাইল তৈরি করবে, যেখানে রাউটিং কনফিগারেশন করা হবে।

2. রাউট কনফিগারেশন

app-routing.module.ts ফাইলে রাউট কনফিগারেশন করতে হবে। এখানে আপনি যেসব কম্পোনেন্ট URL এর সাথে যুক্ত করতে চান, সেগুলোর রুটের পাথ এবং সংশ্লিষ্ট কম্পোনেন্ট উল্লেখ করবেন।

উদাহরণস্বরূপ, ধরুন আমাদের দুটি কম্পোনেন্ট আছে: HomeComponent এবং AboutComponent।

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // Default Route
  { path: 'about', component: AboutComponent }, // About Page Route
  { path: '**', component: NotFoundComponent } // Wildcard Route for 404
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],  // Configuring RouterModule
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

• path: '' এই রুটটি ডিফল্ট রুট হিসেবে ব্যবহৃত হয় (যখন ইউআরএল / হবে, তখন এটি HomeComponent রেন্ডার করবে)।
• path: 'about' /about ইউআরএল-এ গিয়ে AboutComponent রেন্ডার করবে।
• path: ''** এই রুটটি ওয়াইল্ডকার্ড রুট, যা সব অজানা ইউআরএল-এর জন্য NotFoundComponent রেন্ডার করবে (404 পেজ হিসেবে কাজ করবে)।

3. রাউটার মডিউল অ্যাপ্লিকেশন মডিউলে ইম্পোর্ট করা

রাউটিং কনফিগারেশন তৈরি করার পর, এই মডিউলটি app.module.ts ফাইলে ইম্পোর্ট করতে হবে।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'; // Importing the routing module

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule  // Adding routing module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে, AppRoutingModule কে imports অ্যারে তে যোগ করা হয়েছে, যা রাউটিং কার্যকর করে।

4. রাউটিং লিংক তৈরি করা

এখন, আপনি অ্যাপ্লিকেশনে বিভিন্ন পেজে নেভিগেট করতে routerLink ডিরেক্টিভ ব্যবহার করতে পারেন। এই ডিরেক্টিভের মাধ্যমে ইউজার একটি নির্দিষ্ট রুটে নেভিগেট করবে।

উদাহরণ:

<nav>
  <a routerLink="/">Home</a> | 
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

এখানে:

• routerLink অ্যাট্রিবিউট ব্যবহার করে ইউজারকে একটি রুটে নেভিগেট করা হচ্ছে।
• router-outlet এলিমেন্টটি অ্যাপ্লিকেশনের রুট কম্পোনেন্টে যেখানে ডাইনামিকভাবে ভিউ রেন্ডার হবে তা নির্দেশ করে।

5. নেভিগেট করা প্রোগ্রাম্যাটিকভাবে

Angular-এ আপনি প্রোগ্রাম্যাটিকভাবে নেভিগেট করতে Router সার্ভিস ব্যবহার করতে পারেন। এতে আপনি কোনো ইভেন্ট বা অ্যাকশন ঘটলে রাউট পরিবর্তন করতে পারেন।

উদাহরণ:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `<button (click)="navigateToAbout()">Go to About</button>`
})
export class AppComponent {

  constructor(private router: Router) {}

  navigateToAbout() {
    this.router.navigate(['/about']);
  }
}

এখানে, navigateToAbout() মেথডটি about রুটে নেভিগেট করবে।

6. রাউট প্রটেকশন (Optional)

কিছু রুটের জন্য আপনি Guards ব্যবহার করে রাউট অ্যাক্সেস কন্ট্রোল করতে পারেন। যেমন CanActivate গার্ড ব্যবহার করে আপনি কোনো রুট অ্যাক্সেস করার আগে শর্ত চেক করতে পারেন। এটি Authentication বা Authorization চেক করার জন্য ব্যবহৃত হয়।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    const isAuthenticated = false; // Add your authentication check logic here
    if (isAuthenticated) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

এখানে AuthGuard গার্ড ব্যবহার করে একটি রুটের আগে অ্যাক্সেস চেক করা হচ্ছে। যদি ইউজার লগইন না থাকে, তবে সে লগইন পেজে রিডিরেক্ট হবে।

সারাংশ

• Angular অ্যাপ্লিকেশনগুলিতে RouterModule এর মাধ্যমে রাউটিং কনফিগার করা হয়।
• RouterModule.forRoot(routes) ব্যবহার করে অ্যাপ্লিকেশনের রাউট কনফিগারেশন সেট করা হয়।
• routerLink ডিরেক্টিভ দিয়ে ইউজারকে নির্দিষ্ট রুটে নেভিগেট করা হয়।
• router-outlet ব্যবহার করে কম্পোনেন্টের মধ্যে রেন্ডারিং কন্টেন্ট দেখা যায়।
• প্রোগ্রাম্যাটিক্যালি Router সার্ভিস ব্যবহার করে রাউট পরিবর্তন করা যায়।